<template>
    <div class="office-supplies">
        <back-button></back-button>
        <!-- 表单标题 -->
        <h1>资产派发</h1>
    
        <!-- 创建人及时间信息 -->
        <p class="info">创建人：{{ creator }} &emsp; 创建时间：{{ formatDateTime(formData.created) }}</p>
    
        <!-- 表单标签页 -->
        <el-tabs v-model="activeTab" type="card" class="custom-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="基础信息" name="basicInfo">
                <!-- 基础信息的内容 -->
                <!-- 表格区域 -->
                <el-form :model="formData" label-width="80px" disabled>
                    <!-- 基础信息 -->
                    <el-form-item label="标题">
                        <el-input v-model="formData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="申请单号">
                        <el-input v-model="formData.applicationNum"></el-input>
                    </el-form-item>
                    <el-form-item label="申请日期">
                        <el-date-picker type="date" placeholder="选择日期" v-model="formData.applicationDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="申请人">
                        <el-input v-model="applicant"></el-input>
                    </el-form-item>
                    <el-form-item label="派发日期">
                        <el-date-picker type="date" placeholder="选择日期" v-model="formData.distributeDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="派发事由">
                        <el-input type="textarea" v-model="formData.distributeReason"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="formData.remark"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="资产明细" name="assetDetails">
                <!-- 资产明细的内容 -->
                <!-- 表格 -->
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
                    <el-table-column prop="assetName" label="资产名称" width="180"></el-table-column>
                    <el-table-column prop="number" label="资产编码" width="180"></el-table-column>
                    <el-table-column prop="model" label="规格型号" width="180"></el-table-column>
                    <el-table-column prop="kind" label="资产分类"></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column prop="adminName" label="管理人"></el-table-column>
                    <el-table-column prop="userName" label="领用人"></el-table-column>
                    <el-table-column prop="nowLocation" label="当前存放位置" width="160"></el-table-column>
                    <el-table-column prop="targetLocation" label="发放后存放位置" width="160"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
    
                <!-- 分页 -->
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="附件信息" name="attachmentInfo">
                <!-- 附件信息的内容 -->
            </el-tab-pane>
        </el-tabs>
    </div>
    </template>
    
    <script>
    import assetDistributeApi from '@/api/asset-distribute';
    import userService from '@/api/user';
    import {
        parseTime
    } from '@/utils';
    
    import backButton from '@/components/BackButton/backButton.vue';
    
    export default {
        components: {
            backButton
        },
        comments: {
            backButton
        },
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                activeTab: 'basicInfo', // 默认激活第一个标签页
                applicant: '',
                creator: '',
                formData: {
                    title: '',
                    applicationNum: '',
                    applicationDate: '',
                    applicantId: '',
                    distributeDate: '',
                    distributeReason: '',
                    remark: '',
                    creatorId: '',
                    created: '',
                }
            };
        },
        created() {
            this.fetchDistributes()
                .then(() => {
                    this.fetchApplicant();
                    this.fetchCreator()
                })
                .catch(error => {
                    console.error("Error in created hook:", error);
                });
        },
        methods: {
            indexMethod(index) {
                return (index + 1) + (this.currentPage - 1) * this.pageSize; // 返回从1开始的索引
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize
            },
            handleSelectionChange(selection) {
    
            },
            handleCurrentChange(newPage) {
                this.currentPage = newPage
                this.fetchAssets()
            },
            async fetchDistributes() {
                try {
                    const response = await assetDistributeApi.findByNum(this.$route.query.applicationNum);
                    this.formData = {
                        ...response.data,
                        applicationDate: this.formatDate(response.data.applicationDate),
                        distributeDate: this.formatDate(response.data.distributeDate)
                    };
                } catch (error) {
                    return console.log(error);
                }
            },
            fetchAssets() {
                assetDistributeApi.findClaimFixedDetail({
                        page: this.currentPage,
                        limit: this.pageSize,
                        applicationNum: this.$route.query.applicationNum
                    })
                    .then(response => {
                        this.tableData = response.data
                        this.total = response.count
                    })
                    .catch(error => console.log(error))
            },
            fetchApplicant() {
                userService.find(this.formData.applicantId)
                    .then(response => this.applicant = response.data.name)
                    .catch(error => console.log(error))
            },
            fetchCreator() {
                userService.find(this.formData.creatorId)
                    .then(response => this.creator = response.data.name)
                    .catch(error => console.log(error))
            },
            formatDate(str) {
                return parseTime(str, '{y}-{m}-{d}')
            },
            formatDateTime(str) {
                return parseTime(str, '{y}-{m}-{d} {h}:{i}:{s}')
            },
            handleTabClick(tab) {
                if (tab.name === 'assetDetails') {
                    this.fetchAssets();
                }
            }
    
        }
    };
    </script>
    
    <style scoped>
    .office-supplies h1 {
        text-align: center;
    }
    
    .info {
        text-align: right;
        margin-top: 10px;
    }
    
    .custom-tabs {
        margin-top: 20px;
    }
    </style>
    